<template>
  <div class="colonyHouse">
    <el-container style="height: calc(100vh - 180px)">
      <div class="side">
        <el-aside width="140px">
          <div
            class="ranchItem"
            :class="index == isChecked ? 'ranchActive' : ''"
            v-for="(item, index) in ranchList"
            :key="index"
            @click="changeRanch(item, index)"
          >
            {{ item.ranchName }}
          </div>
        </el-aside>
      </div>
      <el-main>
        <div class="search">
          <el-form
            ref="colonyHouseForm"
            :model="colonyHouseForm"
            label-width="80px"
            style="display: flex; margin-top: 20px; margin-left: 8px"
          >
            <el-form-item label="圈舍名称:" prop="colName">
              <el-input
                v-model="colonyHouseForm.colName"
                size="small"
                clearable
                placeholder="圈舍名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="state">
              <el-select
                v-model="colonyHouseForm.state"
                size="small"
                placeholder="圈舍状态"
                clearable
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 20px">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchColonHouse"
                size="small"
                >查阅</el-button
              >
              <el-button
                size="small"
                @click="resetForm('colonyHouseForm')"
                style="width: 75px"
                >重置</el-button
              >
              <el-button
                size="small"
                style="width: 100px; margin-left: 40px"
                type="primary"
                icon="el-icon-plus"
                @click="openAddColonyHouse"
                >新增圈舍</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="ranchCard">
          <el-card
            :body-style="{ padding: '0px' }"
            style="width: 270px; height: 330px; margin-left: 20px"
            :key="index"
            v-for="(item, index) in cardData"
          >
            <img src="@/assets/images/bg2.jpg" class="image" />
            <div style="padding: 10px; overflow: hidden">
              <el-row style="margin-bottom: 10px">
                <span>{{ item.colName }}</span>
              </el-row>
              <div class="ranchData">
                <el-row
                  style="font-size: 12px"
                  type="flex"
                  justify="space-between"
                >
                  <span>存栏量: {{ item.colStock }}</span>
                  <span>耳标盘点数量: {{ item.colEartagCount }}</span>
                  <span>监管预警数: {{ item.colWarnNumber }}</span>
                </el-row>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="operation">
              <el-button type="text" @click="handDetail(item)">查看</el-button>
              <el-button type="text" @click="UpdateColonyHouse(item)"
                >修改</el-button
              >
              <el-button type="text" @click="DelColonyHouse(item)"
                >删除</el-button
              >
              <el-button type="text" @click="DeleteColonyHouse(item)"
                >停用</el-button
              >
            </div>
          </el-card>
        </div>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[4, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <div class="detail">
      <el-dialog
        title="查看详情"
        :visible.sync="dialogVisible"
        width="30%"
        center
      >
        <el-row type="flex" justify="space-around">
          <span>圈舍名称 {{ detailContent.colName }}</span>
          <span>存栏量：{{ detailContent.colStock }}</span>
          <span>耳标盘点数量: {{ detailContent.colEartagCount }}</span>
        </el-row>
        <el-row type="flex" justify="space-around">
          <span>监管预警数: {{ detailContent.colWarnNumber }}</span>
          <span>所属牧场: {{ detailContent.ranchName }}</span>
          <span
            >圈舍状态: <span v-if="detailContent.state === 0">停用</span
            ><span v-else-if="detailContent.state === 1">启用</span></span
          >
        </el-row>
      </el-dialog>
    </div>
    <div class="updateRanch">
      <el-dialog
        title="修改圈舍信息"
        :visible.sync="dialogVisible1"
        width="30%"
      >
        <el-form label-width="100px" :model="updateFormData">
          <el-form-item label="存栏量" class="wi-1">
            <el-input v-model="updateFormData.colStock"></el-input>
          </el-form-item>
          <el-form-item label="耳标盘点数量" class="wi-1">
            <el-input
              v-model="updateFormData.colEartagCount"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="监管预警数" class="wi-1">
            <el-input
              v-model="updateFormData.colWarnNumber"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="圈舍名称" class="wi-1">
            <el-input v-model="updateFormData.colName" clearable></el-input>
          </el-form-item>
          <el-form-item label="圈舍状态:">
            <el-select
              v-model="updateFormData.state"
              size="small"
              placeholder="圈舍状态"
              style="float: left"
            >
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属牧场:">
            <el-select
              v-model="updateFormData.ranchId"
              size="small"
              placeholder="选择牧场"
              style="float: left"
            >
              <el-option
                :label="item1.ranchName"
                :value="String(item1.ranchId)"
                v-for="(item1, index1) in ranchList"
                :key="index1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false" style="margin-right: 40px"
            >取 消</el-button
          >
          <el-button type="primary" @click="handEditColonyHouse"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="addRanch">
      <el-dialog title="新增圈舍" :visible.sync="dialogVisible2" width="30%">
        <el-form label-width="100px" :model="addColonyHouseData">
          <el-form-item label="圈舍名称" class="wi-1">
            <el-input
              v-model="addColonyHouseData.colName"
              clearable
              placeholder="圈舍名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="存栏量" class="wi-1">
            <el-input
              v-model="addColonyHouseData.colStock"
              clearable
              placeholder="存栏量"
            ></el-input>
          </el-form-item>
          <el-form-item label="耳标盘点数量" class="wi-1">
            <el-input
              v-model="addColonyHouseData.colEartagCount"
              clearable
              placeholder="耳标盘点数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="监管预警数" class="wi-1">
            <el-input
              v-model="addColonyHouseData.colWarnNumber"
              clearable
              placeholder="监管预警数"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择牧场:">
            <el-select
              v-model="addColonyHouseData.ranchId"
              size="small"
              placeholder="选择牧场"
              clearable
              style="float: left"
            >
              <el-option
                :label="item1.ranchName"
                :value="String(item1.ranchId)"
                v-for="(item1, index1) in ranchList"
                :key="index1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false" style="margin-right: 40px"
            >取 消</el-button
          >
          <el-button type="primary" @click="addColonyHouse">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      colonyHouseForm: {
        colName: '',
        state: ''
      },
      cardData: [],
      currentPage: 1,
      pageSize: 4,
      total: 0,
      ranchId: 1,
      ranchList: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      detailContent: [],
      updateFormData: {
        colHouseId: 0,
        colStock: 0,
        colEartagCount: 0,
        colWarnNumber: 0,
        colName: '',
        ranchId: 0,
        state: ''
      },
      addColonyHouseData: {
        colName: '',
        colStock: '',
        colEartagCount: '',
        colWarnNumber: '',
        ranchId: '',
      },
      isChecked: 0
    }
  },
  methods: {
    handleSizeChange (page) {
      this.pageSize = page
      this.getColonyHouseList()
    },
    handleCurrentChange (page) {
      this.currentPage = page
      this.searchColonHouse(true, false)
    },
    getColonyHouseList () {
      const data = {
        page: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        },
        colonyHouse: {
          ranchId: this.ranchId
        }
      }
      console.log(this.ranchId)
      const hasSearchConditions = this.colonyHouseForm.colName || this.colonyHouseForm.state
      if (hasSearchConditions) {
        this.searchColonHouse(true)
      } else {
        this.$axios.post('api/colonyhouse/list', data).then(res => {
          this.cardData = res.data.colData
          console.log(this.cardData)
          this.total = res.data.total
        })
      }
    },
    getAllAvailableRanch () {
      this.$axios.get('api/ranch/allranch').then(res => {
        this.ranchList = res.data.ranchData
        this.ranchId = res.data.ranchData[0].ranchId
        // 函数回调，进入界面后以第一个牧场的id刷新
        this.getColonyHouseList();
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.colonyHouseForm.state = ""
    },
    searchColonHouse (isPaging = false, showSuccessMessage = true) {
      console.log(this.form)
      const data = {
        page: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        },
        colonyHouse: {
          colName: this.colonyHouseForm.colName,
          state: this.colonyHouseForm.state
        }
      }
      if (this.colonyHouseForm.colName || this.colonyHouseForm.state) {
        this.$axios.post('/api/colonyhouse/search', data).then(res => {
          if (res.data.code == 1) {
            this.cardData = res.data.colData
            this.total = res.data.total
            if (showSuccessMessage) {
              this.$message.success(res.data.msg)
            }
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        this.getColonyHouseList()
      }
    },
    openAddColonyHouse () {
      console.log(this.addRanchData)
      this.dialogVisible2 = true
    },
    changeRanch (item, index) {
      this.ranchId = item.ranchId
      this.isChecked = index
      this.getColonyHouseList()
    },
    handDetail (item) {
      this.detailContent = item
      // console.log(item);
      this.dialogVisible = true
    },
    DeleteColonyHouse (item) {
      if (item.state === 0) {
        this.$message.error('该圈舍已停用，已无法进行停用操作！')
      } else {
        this.$confirm('您确认要停用该圈舍吗？', '停用圈舍提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/api/colonyhouse/del', { colHouseId: item.colHouseId }).then(res => {
            if (res.data.code == 1) {
              this.$message.success(res.data.msg)
            } else {
              this.$message.error(res.data.msg)
            }
            this.getColonyHouseList()
          })
        }).catch(() => {
          this.dialogVisible = false
        })
      }
    },
    UpdateColonyHouse (item) {
      this.dialogVisible1 = true
      this.updateFormData.colHouseId = item.colHouseId
      this.updateFormData.colStock = item.colStock
      this.updateFormData.colEartagCount = item.colEartagCount
      this.updateFormData.colWarnNumber = item.colWarnNumber
      this.updateFormData.colName = item.colName
      this.updateFormData.state = String(item.state)
      this.updateFormData.ranchId = String(item.ranchId)
    },
    handEditColonyHouse () {
      console.log(this.updateFormData)
      this.$axios.post('/api/colonyhouse/edit', this.updateFormData).then(res => {
        if (res.data.code == 1) {
          this.$message.success(res.data.msg)
          this.dialogVisible1 = false
          this.getColonyHouseList()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    DelColonyHouse (item) {
      this.$confirm('此操作将永久删除该圈舍, 是否继续?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/api/colonyhouse/delete', { colHouseId: item.colHouseId }).then(res => {
          if (res.data.code == 1) {
            this.$message.success(res.data.msg)
            if (this.cardData.length === 1 && this.currentPage > 1) {
              // 如果当前页只剩下一条数据且不是第一页，则返回前一页
              this.currentPage--
            }
            this.getColonyHouseList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addColonyHouse () {
      if (this.addColonyHouseData.colName === '' || this.addColonyHouseData.colStock === '' || this.addColonyHouseData.colEartagCount === '' || this.addColonyHouseData.colWarnNumber === '' || this.addColonyHouseData.ranchId === '') {
        this.$message.error('您有内容未填写!')
      } else {
        this.$axios.post('/api/colonyhouse/add', this.addColonyHouseData).then(res => {
          if (res.data.code == 1) {
            this.$message.success(res.data.msg)
            this.dialogVisible2 = false
            this.getColonyHouseList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
  },
  created () {
    this.getAllAvailableRanch()
    this.getColonyHouseList()
  }
}
</script>

<style lang="less" scoped>
.search {
  display: flex;
}

.el-aside {
  border: 1px solid #ccc;
}
.side {
  height: 100%;
  border: 1px solid #ccc;
}

.el-container {
  height: 100%;
}

.ranchItem {
  width: 99%;
  height: 40px;
  line-height: 40px;
  background-color: #409eff;
  // border-radius: 5px;
  border: 1px solid #ccc;
  color: #fff;
  cursor: pointer;
}

.ranchItem:hover {
  background-color: #2172c4;
}

.ranchCard {
  display: flex;
}

.image {
  width: 300px;
  height: 200px;
  display: block;
}

.el-divider {
  margin: 5px 0;
}

.operation {
  display: flex;
  justify-content: space-evenly;
}

.page {
  margin-top: 40px;
}

.ranchActive {
  background-color: #2172c4;
}
</style>